import Taro,{ Component } from '@tarojs/taro'
import { View , Image , Text} from '@tarojs/components'

import {
  AtTag
} from 'taro-ui'

import './storeItem.scss'
import location_icon from '../../image/ic_location.png'
import phone_icon from '../../image/ic_phone.png'

export default class storeItem extends Component{

  static options = {
    addGlobalClass: true
  }

  defaultProps = {
    storeData : {},
  }

  onStoreItemClick = (store) =>{
    if (store && store.id){
      let storeId = store.id;
      Taro.navigateTo({
        url: `/pages/shop/storeDetail?storeInfo=` + storeId
      })
    }
  }

  onMakePhone = (number , e) => {
    Taro.makePhoneCall({
      phoneNumber : number
    })
    e.stopPropagation()  // 拦截事件冒泡
  }

  onCheckLocation = (e) =>{
    const latitude =  this.props.storeData.latitude
    const longitude =  this.props.storeData.longitude
    Taro.openLocation({
      latitude,
      longitude,
      scale: 18
    })
    e.stopPropagation()  // 拦截事件冒泡
  }

  render(){

    let store = this.props.storeData;

    let distance = '';
    if (store && store.juli){
      if (store.juli >= 1000){
        distance = store.juli / 1000 + 'km';
      } else {
        distance = store.juli + 'm';
      }
    }

    return(
      <View className='store-item-container' onClick={this.onStoreItemClick.bind(this ,store)}>
        <View className='store-item-main'>
          <View className='store-item-info'>
            <Image style='width:60px;height:60px' src={store.addressImage}/>
            <View className='store-item-info-sub'>
              <Text className='store-item-name'>{store.businessName}</Text>
              <AtTag active size='small' style='margin-top: 5px'>
                {store.categoryName}
              </AtTag>
            </View>
          </View>
          <View className='shop-item-phone' onClick={this.onMakePhone.bind(this , store.businessMobile)}>
            <Image className='shop-item-phone-icon' src={phone_icon}></Image>
            <Text className='shop-item-phone-text'>电话</Text>
          </View>
        </View>
        <View className='store-item-add-con' onClick={this.onCheckLocation.bind(this)}>
          <View className='store-item-address-con'>
            <Image style='width:20px;height:20px;margin-left:15px' src={location_icon}/>
            <Text className='store-item-address' style='margin-left:5px;width:90%'>{store.address}</Text>
          </View>
          <Text className='store-item-address' style='margin-right:15px;margin-left:10px'>{distance}</Text>
        </View>
        <View className='store-divider-thin'></View>
      </View>
    )


  }


}

